<template>
  <div class="goods">
  	<!-- 头部 -->
		<shop-header ref="shopHeader">	
			<router-link to="/search" tag="div" class="search-link">
        <x-icon class="search-icon" type="ios-search" size="20"></x-icon>
        <span>请输入要搜索的商品</span>
    	</router-link>	
		</shop-header>
		<div class="search-sort-wrapper">
			<div class="search-sort bottom-1px">
				<div class="sort-item comprehensive" :class="{ active: nowIndex == 0 }" @click="toggleSearchSort(0)">
					<span class="sort-label">{{ compreText }}</span>
					<i class="caret"></i>
				</div>
				<div class="sort-item" :class="{ active: nowIndex == 1 }" @click="toggleSearchSort(1)">
					<span class="sort-label">销量</span>
				</div>
				<div class="sort-item" :class="{ active: nowIndex == 2 }" @click="toggleSearchSort(2)">
					<span class="sort-label">价格</span>
					<span class="price-change-evt">
						<i class="caret01 caret" :class="{ active: priceFlaot && nowIndex == 2 }"></i>
						<i class="caret02 caret" :class="{ active: !priceFlaot && nowIndex == 2 }"></i>
					</span>
				</div>
				<div class="sort-item filterGoods" :class="{ active: nowIndex == 3 }" @click="openGoodsScreen">
					<span class="sort-label">筛选</span>
					<i class="iconfont icon-shaixuan"></i>
				</div>

				<group gutter="0" class="SelectComprehensive" v-show="isSortSelList">
					<radio :options="comprehensiveOpt" :value="compreText" :selected-label-style="{ color: '#f23030' }" @on-change="change"></radio>
				</group>
			</div>
		</div>
		<div class="mask" v-if="isSortSelList" @click="sortSelList"></div>
    <!-- 商品筛选 -->
		<goods-screen @filters="getFilterAttrs" ref="goodsScreen"></goods-screen>
		<!-- 商品列表 -->
		<ul 
		class="goods-list"
		v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="10">
			<li class="goods-item" v-for="(item, index) in goodsList" @click="addBrowse(item)">
	  		<router-link class="goods-item-link" :to="{ path: '/goods/detail', query: { id: item._id } }">
	  			<div class="goods-item-img">
	  				<span class="img-holder"><img class="obj-cover" :src="item.goodsCover"></span>
	  			</div>
	  			<div class="goods-item-content bottom-1px">
		  			<div class="goods-product-text">{{ item.goodsName }}</div>
		  			<p class="goods-product-info">
		  				<span class="goods-product-price">
		  					<i>¥</i>
		  					<span v-if="!item.seckillPrice" class="big-price">{{ item.price | toDecimal }}</span>
		  					<span v-else class="big-price">{{ item.seckillPrice | toDecimal }}</span>
		  				</span>
		  				<span class="goods-product-ratings">{{ item.commentsLen }}条评价</span>
		  			</p>	
	  			</div>
	  		</router-link>
  		</li>
		</ul>
		<div class="spinner-wrapper">
      <mt-spinner v-show="loading && goodsList.length > 0" class="triple-bounce" type="triple-bounce"></mt-spinner>
      <load-more v-show="nomore && goodsList.length > 0" :show-loading="false" tip="暂无更多数据" background-color="#f5f5f5"></load-more>
    </div>
    <no-results :height="{ height: '100%' }" v-if="goodsList.length == 0"></no-results>
  </div>
</template>

<script>
import { Radio, Group, LoadMore } from 'vux'
import { toDecimal } from '@/utils/mUtils'
import http from '@/utils/http'
import ShopHeader from '@/components/public/ShopHeader'
import GoodsScreen from '@/components/goods/GoodsScreen'
import NoResults from '@/components/public/NoResults'

export default {
	components: {
		ShopHeader,
		Radio,
		Group,
		GoodsScreen,
		LoadMore,
		NoResults
	},
  data () {
  	return {
  		loading: true,
      pageNow: 1,
      limit: 5,
      nomore: false,
  		compreText: '综合',
  		comprehensiveOpt: [
  			"综合",
  			"新品",
  			"评价"
  		],
  		isSortSelList: false,
  		isShowFtNav: false,
  		nowIndex: 0,
  		priceFlaot: 0,
  		isShowBtn: false,
  		PriceFlaot: false,
  		goodsList: [],
      minPrice: null,
      maxPrice: null,
      multis: [],
      selAttrIds: []
  	}
  },
  methods: {
    getFilterAttrs (v) {
      this.multis = v.multis 
      this.selAttrIds = v.selAttrIds
      this.minPrice = v.minPrice
      this.maxPrice = v.maxPrice  
      this.goodsList = []
      this.pageNow = 1
      this._getListData()
    },
  	toggleSearchSort (index) {
  		this.nowIndex = index
  		if (this.nowIndex == 0) {
  			this.sortSelList()
  		}else {
  			this.isSortSelList = false
  		}
  		if (this.nowIndex == 1) {
  			let obj = {
  				sortType: 'sortTotalsales'
  			}
  			this.goodsList = []
	      this.pageNow = 1
	      this._getListData(obj)
  		}
  		if (this.nowIndex == 2) {
  			this.priceFlaot = !this.priceFlaot
  			let obj = {
  				sortType: this.priceFlaot == 1 ? 'priceUp' : 'priceDown'
  			}
  			this.goodsList = []
	      this.pageNow = 1
	      this._getListData(obj)
  		} else {
  			this.priceFlaot = false
  		}
  	},
  	openGoodsScreen () {
  		this.$refs.goodsScreen.closeScreenPen()
  	},
  	sortSelList () {
  		this.isSortSelList = !this.isSortSelList
  	},
  	change (val) {
      this.compreText = val
      let obj = {}
      console.log(val)
      if (val == '新品') {
      	obj = {
      		isNewGds: 1
      	}
      }else if (val == '评价') {
      	obj = {
      		sortType: 'sortCommentCount'
      	}
      }
      this.goodsList = []
      this.pageNow = 1
      this._getListData(obj)
    },
    _getListData (obj) {
      // params提交的数据
      let params = {
      	categoryId: this.$route.query.cid,
        keyword: this.$route.query.keyword,
        minPrice: this.minPrice,
        maxPrice: this.maxPrice,
        multis: JSON.stringify(this.multis),
        selAttrIds: JSON.stringify(this.selAttrIds),
        page: this.pageNow, // 当前第几页
        limit: this.limit, // 一次取几条数据
        ...obj //追加的参数
      }
      let method = 'getGoods'
      http.get('/api/v1/' + method, params, false, res => {
        if (res.status == 1 && res.data.length > 0) {
          this.$nextTick(() => {
            for (let i = 0; i<res.data.length; i++) {
              this.goodsList.push(res.data[i])
            }
            this.pageNow++
            this.nomore = false
            this.loading = false
            if (res.data.length < this.limit) {
            	this.nomore = true
            }
          })
        }else {
          this.loading = false
          this.nomore = true
          return
        }
      })
    },
    loadMore () {     
      if (!this.nomore) {
      	this.loading = true
        setTimeout(() => {
          this._getListData()
        }, 500)
      }
    }
  },
  watch: {
  	compreText (val) {
  		if (val) {
  			this.sortSelList()
  		}
  	}
  },
  filters: {
  	toDecimal (val) {
  		return toDecimal(val)
  	}
  },
  mounted () {
  	let that = this
  	let keyword = this.$route.query.keyword;
    this._getListData()
    this.$el.onscroll = function () {
  		that.$refs.shopHeader.isShow = false
  	}
  }
} 

</script>

<style scoped>
.search-link {
	background: #f5f5f5;
	border-radius: 30px;
	height: 30px;
  font-size: 0;
  line-height: 30px;
  box-sizing: border-box;
  margin-right: 10px;
}
.search-link * {
  display: inline-block;
  vertical-align: middle;
}
.search-link span {
  font-size: 12px;
  padding-left: 5px;
  color: #999;
}
.search-sort-wrapper {
	height: 42px;
}
.search-sort {
	position: fixed;
	top: 43px;
	width: 100%;
	max-width: 640px;
	z-index: 5;
	display: flex;
	background: #fff;
}
.sort-item {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	text-align: center;
	font-size: 14px;
	color: #666;
	text-align: center;
}
.sort-label {
	position: relative;
	display: inline-block;
	overflow: hidden;
}
.caret {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 4px solid #999;
}
.comprehensive i {
	position: relative;
	margin: 4px 0 0 2px;
}
.price-change-evt {
	position: relative;
	margin: 0 0 0 2px;
	display: inline-block;
}
.price-change-evt i{
	display: block;
}
.caret01 {
	border-top: 3px solid transparent;
	border-bottom: 4px solid #999;
	margin-bottom: 2px;
}
.price-change-evt .caret01.active {
	border-bottom: 4px solid #f23030;
}
.price-change-evt .caret02.active {
	border-top: 4px solid #f23030;
}
.filterGoods i {
	font-size: 15px;
	color: #999;
	height: 22px;
	margin-left: 2px;
}
.filterGoods.active i,
.sort-item.active .sort-label {
	color: #f23030;
}
.comprehensive.active  i {
	border-top: 4px solid #f23030; 
}
.SelectComprehensive {
	position: absolute;
	width: 100%;
	top: 42px;
	z-index: 4;
}
.mask {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	background: rgba(0, 0, 0, .5);
	z-index: 1;
}
.goods-item-link {
	display: flex;
	background: #fff;
}
.goods-item-img {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
}
.goods-item-img .img-holder {
	padding-bottom: 100%;
}
.goods-item-content {
	flex: 1;
	padding: 5px 10px;
}
.goods-product-text {
	font-size: 14px;
	color: #333;
	line-height: 20px;
	height: 60px;
	overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.goods-product-info {
	display: flex;
	padding-top: 20px;
}
.goods-product-price {
	flex: 1;
	color: #f23030;
	font-size: 0;
} 
.goods-product-price i {
	display: inline-block;
	font-size: 13px;
	padding-right: 2px;
}
.big-price {
	font-size: 16px;
}
.goods-product-ratings {
	font-size: 13px;
	color: #999;
	flex: 0 0 auto;
	line-height: 25px;
}
.search-icon {
  fill: #999;
}
</style>
